<template>
  <draggable :style="'width:'+attr.width+'px;height:'+attr.height+'px;'" class="content" group="content" :ghostClass="ghostClass" v-model="content" @change="toChange">
    <div v-for="(item,index) in content" :key="index">
      <baseContainer :list="item" v-if="item.name == 'base-container'" />
      <div v-if="item.name == 'text'">文本</div>
      <navBar :list="item" v-if="item.name == 'navBar'"></navBar>
      <grid :list="item" v-if="item.name == 'grid'"></grid>
      <swipe :list="item" v-if="item.name == 'swipe'"></swipe>
      <tmpForm :list="item" v-if="item.name == 'form'"></tmpForm>
      <tmpEditor :list="item" v-if="item.name == 'richText'"></tmpEditor>
      <cell :list="item" v-if="item.name == 'cell'"></cell>
      <choujiang :list="item" v-if="item.name == 'lucky'"></choujiang>
      <noticeBar :list="item" v-if="item.name == 'noticeBar'"></noticeBar>
      <steps :list="item" v-if="item.name == 'steps'"></steps>
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
import baseContainer from '../base-container'
import navBar from '../navBar'
import grid from '../grid'
import swipe from '../swipe'
import tmpForm from '../form'
import tmpEditor from '../tmpEditor'
import cell from '../cell'
import choujiang from '../choujiang'
import noticeBar from '../noticeBar'
import steps from '../steps'

export default {
  name:"tmpContent",
  components:{
    draggable,
    baseContainer,
    navBar,
    grid,
    swipe,
    tmpForm,
    tmpEditor,
    cell,
    choujiang,
    noticeBar,
    steps
  },
  data() {
    return {
    }
  },
  methods: {
    toChange(e){
      // console.log("toChange",e)
      let res = e.added?e.added:e.moved
      this.$store.commit("drawing/saveContent",JSON.parse(JSON.stringify(res)))
    },
  },
  computed:{
    content:{
      get(){
        return this.$store.state.drawing.content
      },
      set(e){
        return this.$store.commit("drawing/saveSetContent",e)
      }
    },
    ghostClass:{
      get(){
        return this.$store.state.drawing.ghostClass
      },
    },
    attr(){
      return this.$store.state.drawing.attr
    }
  }
}
</script>

<style scoped>
  .content{
    background-color: #ffffff;
    box-shadow: 0 0 4px 0 rgb(29 31 37 / 18%);
  }
</style>